---
import whale from "#/assets/images/big-whale.png"
import { Image } from "astro:assets"
import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
import ButtonA from "../../ButtonA.astro"
import ContainedSection from "../../ContainedSection.astro"
import H1 from "../../typography/h1.astro"
import Subtitle from "../../typography/subtitle.astro"

interface Props {
  title: any
  text: any
}

const { title, text } = Astro.props

const titleHtml = renderTitle(title)
const textHtml = renderRichText(text)
---

<ContainedSection>
  <div
    class="grid w-full py-24"
    id="animation-container"
  >
    <div
      class="z-20 col-start-1 max-w-2xl justify-center justify-self-center row-start-1 self-center flex flex-col items-center text-center opacity-0 translate-y-6 transition-all duration-700"
      id="content-section"
    >
      <H1>
        <Fragment set:html={titleHtml} />
      </H1>
      <div class="text-3xl max-w-[1037px] py-4 sm:py-8">
        <Subtitle>
          <Fragment set:html={textHtml} />
        </Subtitle>
      </div>
      <ButtonA href="https://ceremony.union.build/">Join ceremony</ButtonA>
    </div>
    <Image
      src={whale}
      alt="Big Whale"
      class="z-10 scale-[1.3] md:scale-[0.8] col-start-1 row-start-1 opacity-0 transition-all duration-700"
      id="whale-image"
    />
  </div>
</ContainedSection>

<script>
let fadeInTimeout: Timer
let observer: IntersectionObserver

function setupAnimation() {
  // Clear any existing observer
  if (observer) {
    observer.disconnect()
  }

  // Clear any existing timeout
  clearTimeout(fadeInTimeout)

  // Reset elements to initial state
  const whale = document.getElementById("whale-image")
  const content = document.getElementById("content-section")

  whale?.classList.remove("opacity-100", "scale-[1.5]", "md:scale-100")
  whale?.classList.add("scale-[1.3]", "md:scale-[0.8]", "opacity-0")
  content?.classList.remove("opacity-100", "translate-y-0")
  content?.classList.add("opacity-0", "translate-y-6")

  observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        const whale = document.getElementById("whale-image")
        const content = document.getElementById("content-section")

        if (entry.isIntersecting) {
          // Staggered fade in
          whale?.classList.remove("scale-[1.3]", "md:scale-[0.8]")
          whale?.classList.add("opacity-100", "scale-[1.5]", "md:scale-100")

          clearTimeout(fadeInTimeout)
          fadeInTimeout = setTimeout(() => {
            content?.classList.add("opacity-100", "translate-y-0")
          }, 400)
        } else {
          // Ensure both elements fade out
          clearTimeout(fadeInTimeout)
          whale?.classList.remove(
            "opacity-100",
            "scale-[1.5]",
            "md:scale-100",
          )
          whale?.classList.add("scale-[1.3]", "md:scale-[0.8]")
          content?.classList.remove("opacity-100", "translate-y-0")
        }
      })
    },
    {
      threshold: [0.2, 0.8],
      rootMargin: "-10%",
    },
  )

  // Start observing
  const container = document.getElementById("animation-container")
  if (container) {
    observer.observe(container)
  }
}

// Initial setup
setupAnimation()

// Handle client-side navigation
document.addEventListener("astro:page-load", () => {
  setupAnimation()
})

// Cleanup
document.addEventListener("astro:before-preparation", () => {
  clearTimeout(fadeInTimeout)
  if (observer) {
    observer.disconnect()
  }
})
</script>
